<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Tutorial: 快速开始</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Tutorial: 快速开始</h1>

    <section>

<header>
    

    <h2>快速开始</h2>
</header>

<article>
    <h2><strong>1. 基本的html结构</strong></h2><pre class="prettyprint source lang-html"><code>&lt;div ct-data-role=&quot;page&quot; id=&quot;index&quot;>&lt;/div></code></pre><p>&ensp;&ensp;具有ct-data-role=&quot;page&quot;属性的元素代表一个基本的页面, id属性唯一标识这个页面，需要注意的是具有ct-data-role=&quot;page&quot;属性的元素必须为body的子元素，不能是任意级别的元素。还需要注意的是html中至少含有一个Page的结构来代表第一个显示的页面内容</p>
<h2><strong>2. 初始化应用</strong></h2><pre class="prettyprint source lang-js"><code>import CtMobile from &quot;ctmobile&quot;;
const Router = {
    index: {
      url: &quot;/static/html/index.html&quot;,
      component: import(/* webpackChunkName: &quot;index&quot; */ &quot;../pages/index&quot;),
    },
    info: {
      url: &quot;/static/html/info.html&quot;,
      component: import(/* webpackChunkName: &quot;info&quot; */ &quot;../pages/info&quot;),
    },
    about: {
      url: &quot;/static/html/about.html&quot;,
      component: import(/* webpackChunkName: &quot;about&quot; */ &quot;../pages/about&quot;),
    },
};
const App = CtMobile.CtMobileFactory.create({
    supportCordova: false,
    linkCaptureReload: false,
    router: Router,
});</code></pre><p>&ensp;详细参数解释请参考<a href="#属性配置">属性配置</a>。</p>
<h2><strong>3. 路由</strong></h2><p>&ensp;&ensp;在初始化应用的代码中需要配置router选项，router是一个对象，对象的键需要和基本结构中id属性的值保持一致，值为一个对象，有两个属性url和component</p>
<ul>
<li>url
代表这个页面引用的html片段地址，片段就是一个Page的基本结构</li>
<li>component
返回一个Promise对象，代表这个页面的逻辑处理类，Promise中返回的对象应该是继承了Page类的一个子类。
如用Webpack进行开发的时候可以定义成<pre class="prettyprint source lang-js"><code>component: import(/* webpackChunkName: &quot;about&quot; */ &quot;../pages/about&quot;)</code></pre>component属性可以不进行设置，如果不设置component属性，那么框架会认为url载入的页面只进行显示，不进行逻辑处理。</li>
</ul>
<h2><strong>4. 编写页面对应的Page</strong></h2><pre class="prettyprint source lang-js"><code>import CtMobile from 'ctmobile';

export default class extends CtMobile.Page {
    constructor(ctmobile, id) {
      super(ctmobile, id);
    }

    /**
     * @override
     */
    pageCreate(){
        console.log('页面初始化');
    }

    /**
     * @override
     */
    pageShow() {
      console.log('page的DOM显示时调用');
    }

    /**
     * @override
     */
    pageBeforeDestory(){
      console.log('page的DOM销毁之前调用');
    }
}</code></pre><p>&ensp;&ensp;编写一个类继承自Page类即可完成一个页面的定义，其中构造函数会有两个参数，ctmobile和id，其中ctmobile代表整个App的实例，id代表Page基本机构中的id属性值。
&ensp;&ensp;其中pageCreate，pageShow和pageBeforeDestory是Page的生命周期函数，更多生命周期函数请参考<a href="#9-Page的生命周期">Page的生命周期</a></p>
<h2><strong>5. 跳转到一个新页面</strong></h2><p>&ensp;跳转到一个新页面可以有两种方式</p>
<ul>
<li><p>配置方式</p>
<pre class="prettyprint source lang-js"><code>&lt;a ct-pageId=&quot;info&quot;>跳转到info页面&lt;/a></code></pre><p>&ensp;&ensp;在a标签中使用ct-pageId属性就可以跳转到一个新的页面，其中ct-pageId的值为Page基本机构中id的值。</p>
</li>
<li><p>api方式
使用App.startPage方法跳转到一个新的页面，其中App对象是初始化应用后的返回值，如果是在Page类中可以通过this.getCtMobile()方法获取</p>
<pre class="prettyprint source lang-js"><code>this.getCtMobile().startPage(&quot;/static/html/info.html?pageId=info&quot;);</code></pre><p>&ensp;&ensp;需要注意的是html路径后会有一个pageId的参数，参数值是Page基本结构中id的值</p>
</li>
</ul>
<h2><strong>6. 页面间传递参数</strong></h2><ul>
<li>字符串方式<ul>
<li>使用ct-parameter属性<pre class="prettyprint source lang-js"><code>&lt;a ct-pageId=&quot;about&quot; ct-parameter=&quot;&a=1&b=2&quot;>&lt;/a></code></pre></li>
<li>使用api方式<pre class="prettyprint source lang-js"><code>this.getCtMobile().startPage(&quot;/static/html/info.html?pageId=info&a=1&b=2&quot;);</code></pre></li>
</ul>
</li>
<li><p>内存方式
&ensp;&ensp;通过调用Page类的setRequest方法进行参数传递，在目标页面调用Page类的getRequest方法获取参数，使用内存方式的好处是可以在页面之间传递任何数据类型的数据，缺点是如果直接刷新此页的话不会保存上一回的数据，不像字符串方式可以永久保留参数的值</p>
<p> A.js</p>
<pre class="prettyprint source lang-js"><code> &lt;!-- 向B.html传递参数 -->
 this.setRequest('requestCode',{a:1,b:2});
 this.ctmobile.startPage(&quot;/static/html/b.html?pageId=b&quot;);</code></pre><p> B.js</p>
<pre class="prettyprint source lang-js"><code> pageAfterShow() {
     &lt;!-- 获取A.html传递过来的参数 -->
     const parameter = JSON.stringify(this.getRequest());
     console.log('parameter',parameter);
  }</code></pre><p>&ensp;&ensp;需要注意的是需要在pageAfterShow的回调中调用getRequest方法，只要pageAfterShow函数被调用，之后在任何地方在调用getRequest方法都可以获取到参数。</p>
</li>
</ul>
<h2><strong>7. 带有返回值的页面</strong></h2><p>&ensp;&ensp; 页面的基本结构中加入ct-page-mode=&quot;result&quot;或者ct-page-mode=&quot;singleInstanceResult&quot;属性</p>
<p>&ensp;&ensp;举个例子，当前有两个页面index.html，PopUpDialog.html两个页面。index.html中有个弹出按钮，点击按钮弹出PopUpDialog页面</p>
<p>&ensp;&ensp;index.html定义</p>
<pre class="prettyprint source lang-js"><code>&lt;div ct-data-role=&quot;page&quot; id=&quot;index&quot;>
    &lt;a ct-pageId=&quot;PopUpDialog&quot;>弹出PopUpDialog&lt;/a>
    &lt;div class=&quot;resultText&quot;>PopUpDialog的返回值&lt;div>
&lt;/div></code></pre><p>&ensp;&ensp;index.js定义</p>
<pre class="prettyprint source lang-js"><code>import CtMobile from 'ctmobile';
import $ from 'jquery';
export default class extends CtMobile.Page{
  constructor(ctmobile,id){
    super(ctmobile,id);
  }

  /**
   * override
   */
  pageCreate() {

  }

  /**
   * PopUpDialog返回时触发
   * override
   */
  pageResult(e, resultCode, bundle) {
     console.log(&quot;resultCode&quot;, resultCode, &quot;bundle&quot;, JSON.stringify(bundle));
     alert(`resultCode:${resultCode}\r\nbundle:${JSON.stringify(bundle)}`);
  }
}</code></pre><p>&ensp;&ensp;PopUpDialog的html定义</p>
<pre class="prettyprint source lang-html"><code>&lt;div ct-data-role=&quot;page&quot; id=&quot;PopUpDialog&quot; ct-data-mode=&quot;result&quot;>
    &lt;button class=&quot;result&quot;>返回&lt;/button>
&lt;/div></code></pre><p>&ensp;&ensp;或者</p>
<pre class="prettyprint source lang-html"><code>&lt;div ct-data-role=&quot;page&quot; id=&quot;PopUpDialog&quot; ct-data-mode=&quot;singleInstanceResult&quot;>
    &lt;button class=&quot;result&quot;>返回&lt;/button>
&lt;/div></code></pre><p>&ensp;&ensp;PopUpDialog.js定义</p>
<pre class="prettyprint source lang-js"><code>import CtMobile from 'ctmobile';
import $ from 'jquery';

export default class extends CtMobile.Page {
  constructor(ctmobile,id){
    super(ctmobile,id);
  }

  /**
   * override
   */
  pageCreate() {
    const $btnEL = this.getPageJO().find(' .result');
    $btnEl.on('click' , () => {
       this.setResult('PopUpDialog', {a: 1, b: 2});
       this.over();
    });
  }
}</code></pre><p>&ensp;&ensp;index.html需要做的是在index.js中重写pageResult方法，此方法在PopUpDialog返回或手动调用finish方法后被触发，pageResult的有三个参数e，resultCode，bundle，其中resultCode用来区分不同的来源，bundle是被带回来的值。
&ensp;&ensp;PopUpDialog.html需要做的是在PopUpDialog.js中调用this.setResult(resultCode,bundle);方法来设置返回的值，在调用this.finish();方法后页面关闭。</p>
<p>带有返回值的页面使用场景一般分为两种</p>
<ul>
<li>多对一
a.html,b.html,c.html...都弹出d.html</li>
<li>一对多
a.html弹出b.html,c.html,d.html...</li>
</ul>
<p>在多对一的情况下可以通过setRequest方法把父页面的标志传递过去。</p>
<p>在一对多的情况下可以通过pageResult方法的requestCode区分不同来源。</p>
<h2><strong>8. Page的启动模式</strong></h2><p>在页面的基本结构中设置ct-data-mode属性值即可，框架一共支持5中启动模式</p>
<ul>
<li><p>standard（默认）
&ensp;&ensp;多例模式</p>
<p>&ensp;&ensp;多例模式就是通过配置或者api跳转到此页面的时候都会建立一个新的实例，所谓新的实例就是Dom和Dom对应的Page类都会是新的。</p>
</li>
<li><p>single
&ensp;&ensp;单例模式(当点击返回时会销毁)</p>
<p>&ensp;&ensp;和Android中single一样,举个例子，加入有如下的页面开发顺序 :
index.html -&gt; a.html -&gt; b.html -&gt; c.html -&gt; d.html -&gt; b.html
如果把b.html的ct-data-mode设置为single，那么执行上述页面顺序后，   历史栈中当前是 index.html -&gt; a.html -&gt; b.html 
也是删除了c.html和d.html，删除的同事也会调用相应的生命周期函数。
但是如果在b.html中点击返回那么b.html还是会销毁的。</p>
</li>
<li><p>singleInstance
&ensp;&ensp;完全的单例模式(在任何时候都不会被销毁)</p>
<p>&ensp;&ensp;完全单例就是在任何时候都不会被销毁且只有一个实例存在。</p>
</li>
<li><p>result
&ensp;&ensp;带有返回值的(可以向父页面带回返回值)</p>
<p>&ensp;&ensp;<a href="#7-带有返回值的页面">参见带有返回值的页面</a></p>
</li>
<li><p>singleInstanceResult
&ensp;&ensp;带有返回值的完全单例(不会被销毁，可以向父页面带回返回值)</p>
<p>&ensp;&ensp;和result一样只是实例不会被销毁。</p>
</li>
</ul>
<h2><strong>9. Page的生命周期</strong></h2><p>Page一共有10个生命周期函数</p>
<p>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<img src="https://github.com/playerljc/CTMobile/raw/master/outimages/pagelife.png" alt="" title="Page生命周期"></p>
<h2><strong>10. 页面转场效果</strong></h2><p>在页面的基本结构中设置ct-data-transition属性值即可，框架一共支持13种页面的过度效果</p>
<ul>
<li>slideleft-从右到左(overlay)</li>
<li>slideright-从左到右(overlay)</li>
<li>slideup-从下到上(overlay)</li>
<li>slidedown-从上到下(overlay)</li>
<li>wxslideleft-类似于微信的从右到左</li>
<li>wxslideright-类似于微信的从左到右</li>
<li>wxslideup-类似于微信的从下到上</li>
<li>wxslidedown-类似于微信的从上到下</li>
<li>pushslideleft-从右到左(push)</li>
<li>pushslideright-从左到右(push)</li>
<li>pushslideup-从下到上(push)</li>
<li>pushslidedown-从上到下(push)</li>
<li>material-Android Material的风格</li>
</ul>
<h2><strong>11. 广播(borasdcast)</strong></h2><p>&ensp;&ensp;借鉴了Android中Borasdcast概念，为Page之间的数据传递提供了一系列功能，广播分为有序和无序，可以通过配置和api两种方式实现广播。</p>
<ul>
<li><p>通过配置注册
在基本机构中加入ct-data-intentfilter-action，ct-data-intentfilter-categorys属性进行注册</p>
<pre class="prettyprint source lang-html"><code>&lt;div ct-page-role=&quot;page&quot; 
 id=&quot;index&quot; 
 ct-data-intentfilter-action=&quot;actionCode&quot;
 ct-data-intentfilter-categorys=&quot;c1,c2&quot;
 ct-data-intentfilter-priority=&quot;0&quot;
>&lt;/div></code></pre><p>Page中重写pageReceiver方法</p>
<pre class="prettyprint source lang-js"><code>import CtMobile from 'ctmobile';
export default class extends CtMobile.Page {
   constructor(ctmobile,id){
     super(ctmobile,id);
   }

   /**
    * @override
    */
   pageReceiver(intent) {
     console.log(intent);
   }
} </code></pre></li>
<li><p>通过api注册</p>
<pre class="prettyprint source lang-js"><code>import CtMobile from 'ctmobile';
export default class extends CtMobile.Page {
  constructor(ctmobile,id){
    super(ctmobile,id);
  }

  onRegisterReceiver(intent) {
     console.log(JSON.stringify(intent));
  }

  /**
    * @override
    */
  pageCreate() {
    this.onRegisterReceiver = this.onRegisterReceiver.bind(this);

    // 注册borasdcast
    this.ctmobile.registerReceiver({
      action: 'actionCode',
      priority: 0,
      categorys: ['c1','c2']
    }, this.onRegisterReceiver);
  }
}</code></pre></li>
<li>发送无序广播
在Page类中调用CtMobile的sendBroadcast方法<pre class="prettyprint source lang-js"><code>this.ctmobile.sendBroadcast({
 action: 'actionCode',
 categorys: ['c1','c2'],
 bundle: {
   a: 1,
   b: 2
 }
});</code></pre></li>
<li>发送有序广播
在Page类中调用CtMobile的sendOrderedBroadcast方法<pre class="prettyprint source lang-js"><code>this.ctmobile.sendOrderedBroadcast({
 action: 'actionCode',
 categorys: ['c1','c2'],
 bundle: {
   a: 1,
   b: 2
 }
});</code></pre></li>
<li>有序广播<ul>
<li>通知的优先级 
有序广播的通知是有顺序的，这个顺序是有priority这个属性决定的，priority越大越先被通知到，越小越晚被通知到。
使用配置设置priority<pre class="prettyprint source lang-html"><code>&lt;div ct-page-role=&quot;page&quot; 
id=&quot;index&quot; 
ct-data-intentfilter-priority=&quot;0&quot;
>&lt;/div></code></pre>使用api注册设置priority<pre class="prettyprint source lang-js"><code>// 注册borasdcast
this.ctmobile.registerReceiver({
action: 'actionCode',
priority: 0,
categorys: ['c1','c2']
}, this.onRegisterReceiver);</code></pre></li>
<li>向后传递参数和终止传递 </li>
</ul>
</li>
</ul>
<p>&ensp;&ensp;在有序广播的回调函数中会有2个参数intent和opt，其中intent是通知传递的参数，opt是个对象，其中有2个方法,putExtras和next，其中putExtras设置向下传递的参数，这些参数是合并在一起的。只有调用next方法才向下进行传递。</p>
<ul>
<li>通知的分类(categorys)</li>
</ul>
<p>&ensp;&ensp;在注册广播的时候除了Action之外，还可以定义多个category，categorys可以认为是一个二级标题，作用是用来对Action进行细粒度的定义。 </p>
<h2><strong>12. 其他功能</strong></h2><ul>
<li><p>是否增加历史
如果不想让新跳转的页面增加到历史栈中，可以设置ct-reload属性为true来阻止浏览器增加历史。</p>
<pre class="prettyprint source lang-html"><code>&lt;a ct-pageId=&quot;a&quot; ct-reload=&quot;true&quot;>a.html&lt;/a></code></pre><pre class="prettyprint source lang-js"><code>this.ctmobile.startPage('/static/html/a.html?pageId=a',{
 reload:true
});</code></pre><p>比如index.html -&gt; a.html，那么历史栈中只有a.html</p>
</li>
<li><p>a标签不交由框架处理
有些时候我们不希望让框架来处理a标签的行为，此时就可以在a标签上加入ct-data-ajax=&quot;false&quot;</p>
</li>
<li><p>ajax内容预加载</p>
<pre class="prettyprint source lang-html"><code>&lt;div ct-data-role=&quot;page&quot; id=&quot;index&quot;>
 &lt;a ct-pageId=&quot;a&quot; ct-data-preload=&quot;true&quot;>into a.html&lt;/a>
 &lt;a ct-pageId=&quot;b&quot; ct-data-preload=&quot;true&quot;>into b.html&lt;/a>
 &lt;a ct-pageId=&quot;c&quot; ct-data-preload=&quot;true&quot;>into c.html&lt;/a>
 &lt;a ct-pageId=&quot;d&quot; ct-data-preload=&quot;true&quot;>into d.html&lt;/a>
 &lt;a ct-pageId=&quot;e&quot; ct-data-preload=&quot;true&quot;>into e.html&lt;/a>
&lt;/div></code></pre><p>框架会在初始化的时候就加载a-e.html的内容
如果a-e.html中还有需要预加载的页面，那框架还会进行预加载
每个页面只会被预加载一次，如果预加载完了以后就不会在被预加载了。</p>
</li>
<li><p>使用配置进行页面的返回</p>
<pre class="prettyprint source lang-html"><code>&lt;div ct-data-role=&quot;page&quot; id=&quot;about&quot;>
 &lt;header>
   &lt;a class=&quot;ct-back-icon&quot; ct-data-rel=&quot;back&quot;>&lt;/a>
 &lt;/header>
&lt;/div></code></pre></li>
</ul>
</article>

</section>

</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BorasdCast.html">BorasdCast</a></li><li><a href="CtMobile.html">CtMobile</a></li><li><a href="CtMobileFactory.html">CtMobileFactory</a></li><li><a href="Page.html">Page</a></li><li><a href="Router.html">Router</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-config.html">配置</a></li><li><a href="tutorial-introduction.html">自述</a></li><li><a href="tutorial-tutorial.html">指南</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Nov 25 2018 09:00:21 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>